<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Recreation'})" class="return"></a>
			竞拍大师
			<router-link class="operating" tag="span" to="/Explain?code=alading">
				<img src="../../assets/recreation/person.png" style="width: 20px;height: 20px;" />
			</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="shop">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<section>
							<ul class="box">
								<li>
									<div align="left" class="left" @click="getUp">
										<img src="../../assets/recreation/face.jpg" class="img" />
										<div style="padding-top: 10px;position: relative;padding-left: 10px;padding-right: 10px;">
											<van-progress :percentage="30" :show-pivot="false" color="rgb(60,167,109)" />
											<div class="bfb">30%</div>
											<div style="padding-top: 5px;padding-bottom:5px;font-size: 13px;">
												<span>电子智能手表卡西欧</span>
											</div>
											<div style="padding-bottom: 10px;font-size: 12px;color: #999999;">
												<span>已有</span>
												<span style="color: rgb(60,167,109);">123456</span>
												<span>人参与竞品</span>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div align="left" class="left" @click="getUp">
										<img src="../../assets/recreation/face.jpg" class="img" />
										<div style="padding-top: 10px;position: relative;padding-left: 10px;padding-right: 10px;">
											<van-progress :percentage="30" :show-pivot="false" color="rgb(60,167,109)" />
											<div class="bfb">30%</div>
											<div style="padding-top: 5px;padding-bottom:5px;font-size: 13px;">
												<span>电子智能手表卡西欧</span>
											</div>
											<div style="padding-bottom: 10px;font-size: 12px;color: #999999;">
												<span>已有</span>
												<span style="color: rgb(60,167,109);">123456</span>
												<span>人参与竞品</span>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div align="left" class="left" @click="getUp">
										<img src="../../assets/recreation/face.jpg" class="img" />
										<div style="padding-top: 10px;position: relative;padding-left: 10px;padding-right: 10px;">
											<van-progress :percentage="30" :show-pivot="false" color="rgb(60,167,109)" />
											<div class="bfb">30%</div>
											<div style="padding-top: 5px;padding-bottom:5px;font-size: 13px;">
												<span>电子智能手表卡西欧</span>
											</div>
											<div style="padding-bottom: 10px;font-size: 12px;color: #999999;">
												<span>已有</span>
												<span style="color: rgb(60,167,109);">123456</span>
												<span>人参与竞品</span>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div align="left" class="left" @click="getUp">
										<img src="../../assets/recreation/face.jpg" class="img" />
										<div style="padding-top: 10px;position: relative;padding-left: 10px;padding-right: 10px;">
											<van-progress :percentage="30" :show-pivot="false" color="rgb(60,167,109)" />
											<div class="bfb">30%</div>
											<div style="padding-top: 5px;padding-bottom:5px;font-size: 13px;">
												<span>电子智能手表卡西欧</span>
											</div>
											<div style="padding-bottom: 10px;font-size: 12px;color: #999999;">
												<span>已有</span>
												<span style="color: rgb(60,167,109);">123456</span>
												<span>人参与竞品</span>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div align="left" class="left" @click="getUp">
										<img src="../../assets/recreation/face.jpg" class="img" />
										<div style="padding-top: 10px;position: relative;padding-left: 10px;padding-right: 10px;">
											<van-progress :percentage="30" :show-pivot="false" color="rgb(60,167,109)" />
											<div class="bfb">30%</div>
											<div style="padding-top: 5px;padding-bottom:5px;font-size: 13px;">
												<span>电子智能手表卡西欧</span>
											</div>
											<div style="padding-bottom: 10px;font-size: 12px;color: #999999;">
												<span>已有</span>
												<span style="color: rgb(60,167,109);">123456</span>
												<span>人参与竞品</span>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</section>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				isLoading: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {

		},
		methods: {
			getUp() { // 进入详情页
				this.$router.push({
					name: 'Details'
				})
			},
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
		}
	}
</script>

<style scoped lang="less">
	.head {
		background: white;
		color: black;
	}
	
	.head .return:after {
		border-color: black;
	}
	
	.overlay {
		background: transparent;
	}
	
	.shop {
		color: black;
		padding: 5px 0px;
	}
	
	.left {
		background-color: white;
		border-radius: 5px;
	}
	
	.van-col {
		padding-bottom: 10px;
	}
	
	.van-image {
		margin-bottom: -25px;
	}
	
	.van-progress {
		width: 70%;
		height: 5px;
	}
	
	.bfb {
		position: absolute;
		font-size: 12px;
		top: 3px;
		right: 10px;
		color: rgb(60, 167, 109);
	}
	
	section {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	
	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 10px;
	}
	
	.box li {
		width: calc(~"50% - 10px");
		margin-right: 10px;
		margin-bottom: 10px;
		margin-top: 5px;
	}
	
	.img {
		width: 100%;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}
</style>